<template>
  <div class="cell">
    <a @click="cent" class="cai-1 cai" href="javascript:;">
      <span>家常菜</span>
    </a>
    <a @click="cent" class="cai-2 cai" href="javascript:;">
      <span>快手菜</span>
    </a>
    <a @click="cent" class="cai-3 cai" href="javascript:;">
      <span>下饭菜</span>
    </a>
    <a @click="cent" class="cai-4 cai" href="javascript:;">
      <span>早餐</span>
    </a>
    <a @click="cent" class="cai-5 cai" href="javascript:;">
      <span>肉</span>
    </a>
    <a @click="cent" class="cai-6 cai" href="javascript:;">
      <span>鱼</span>
    </a>
  </div>
</template>


<script>
export default {
  mounted() {
    axios({
      url: "/json/cell.json"
    }).then(
      res => res.data.reason === "Success" && (this.arr = res.data.result.data)
      // res => console.log(res)
    )
  },
  methods: {
      cent(){
        this.$router.replace('/list')
      }
  },
    
};
</script>

<style scoped>
.cell {
  overflow: hidden;
  font-size: 1.125rem;
}
.cai {
  display: block;
  width: 30%;
  height: 5.5rem;
  float: left;
  margin-left: 2.5%;
  margin-top: 0.625rem;
  background: #ccc;
  position: relative;
}
.cai-1 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
}
.cai-2 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
  background-position: 0 -5.5rem;
}
.cai-3 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
  background-position: 0 -11rem;
}
.cai-4 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
  background-position: 0 -16.5rem;
}
.cai-5 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
  background-position: 0 -22rem;
}
.cai-6 {
  background: url(./assets/img/cai.jpg) no-repeat;
  background-size: cover;
  background-position: 0 -27.5rem;
}
span {
  display: block;
  width: 100%;
  color: #fff;
  text-align: center;
  font-weight: 700;
  position: absolute;
  bottom: 0.875rem;
}
</style>